<template>
  <div class="project_show_template">
    <el-row :gutter="20" type="flex" justify="center">
      <el-col :lg="12" :xl="8">
        <div class="panel-wrapper">
          <a href="/explore/all?project_type=campaign" class="panel-funding"
             style="background-image: url('static/img/show2.png');">
            <div class="panel-header">
              Funding
            </div>
            <div class="funding-bar">
              <div class="funding-bar--filled"></div>
            </div>
            <div class="panel-description">
              Indiegogo's crowdfunding campaigns and InDemand campaigns are where new and groundbreaking projects take
              flight.
            </div>
            <div class="cta-link">
              Back campaigns >
            </div>
          </a>
        </div>

      </el-col>
      <el-col :lg="12" :xl="8">
        <div class="panel-wrapper">
          <a href="/explore/all?project_type=campaign" class="panel-funding"
             style="background-image: url('static/img/show1.png');">
            <div class="panel-header">
              MarketPlace
            </div>
            <div class="marketplace-shipping">
              Shipping Guaranteed
            </div>
            <div class="panel-description">
              The marketplace is loaded with clever and surprising innovation in tech, design, and more — most of them
              shipping within a few days.
            </div>
            <div class="cta-link">
              Shop products >
            </div>
          </a>
        </div>
      </el-col>

    </el-row>
    <el-row :gutter="20" class="props" type="flex" justify="center">
      <el-col :span="8">
        <div class="container">
          <img src="~assets/idea.png" class="icon">
          <span class="title">Innovation starts here</span>
          <span class="content">
          With both crowdfunding campaigns and products shipping now, Indiegogo is the source for ingenious products that help your life run smoothly.
          </span>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="container">
          <img src="~assets/key.png" class="icon">
          <span class="title">The earliest access</span>
          <span class="content">
            With Indiegogo’s crowdfunding campaigns, discover and back buzz-worthy tech and design products well before they hit the mainstream.
          </span>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="container">
          <img src="~assets/bandge.png" class="icon">
          <span class="title">Marketplace guarantee</span>
          <span class="content">
            Indiegogo’s Product Marketplace is loaded with clever and unconventional products that are guaranteed to ship on time or you’ll get your money back.
          </span>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <project-item></project-item>
    </el-row>
    <el-row :gutter="20" class="intro">
      <div class="container">
        <h2 class="title">
          Which categories interest you?
        </h2>
        <div class="subtitle">Discover projects just for you and get great recommendations when you select your
          interests.
        </div>
        <a id="categories-cta" href="/accounts/sign_up?return_to=%2F" class="i-cta-1 i-cta-1--ghostBatman">Sign up and
          select interests</a>
        <div class="categories-body">Or explore our top categories</div>
      </div>
    </el-row>
    <el-row :gutter="20" class="area">
      <el-col :span="4">
        <div class="container">
          <img src="~assets/home.png">
          <span>Home</span>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="container">
          <img src="~assets/phone.png">
          <span>
          Phones & Accessories
        </span>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="container">
          <img src="~assets/travel.png">
          <span>
          Travel & Outdoors
        </span>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="container">
          <img src="~assets/health.png">
          <span>
          Health & Fitness
        </span>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="container">
          <img src="~assets/audio.png">
          <span>
          Audio
        </span>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="container">
          <img src="~assets/film.png">
          <span>
          Film
        </span>
        </div>
      </el-col>


    </el-row>
  </div>
</template>

<script>
  import {mapState, mapActions} from 'vuex'
  import ProjectItem from 'components/content/projectItem'

  export default {
    data() {
      return {
        restaurants: [],
        state4: '',
        timeout: null
      }
    },
    mounted() {
      //获取用户信息
      // this.getUserInfo();

    },
    props: ['signinUp', 'headTitle', 'goBack'],
    computed: {
      ...mapState([
        'userInfo'
      ]),
    },
    components: {
      ProjectItem: ProjectItem
    },
    methods: {
      ...mapActions([
        'getUserInfo'
      ]),
      loginInHandler() {
        this.$emit("loginInHandler")
      },
      signUpHandler() {
        this.$emit("signUpHandler")

      }
    },

  }

</script>

<style lang="scss" scoped>
  @import '../../style/mixin';

  .project_show_template {
    height: 552px;
    margin: 80px 0;
    padding: 16px;
    background-color: white;
    .panel-wrapper {
      position: relative;
      min-height: 1px;
      padding-left: 26px;
      padding-right: 26px;
      height: 100%;
      .panel-funding {
        background: no-repeat center;
        height: 552px;
        background-size: cover;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 0 20px;
        color: #2a2a2a;
        .panel-header {
          font-size: 32px;
          margin-bottom: 20px;
          font-family: 'Domine', serif;
        }
        .funding-bar {
          background-color: #dddddd;
          margin: 0 30px;
          height: 7px;
          width: 50%;
          border-radius: 5px;
          position: relative;
          margin-bottom: 20px;
        }
        .funding-bar--filled {
          position: absolute;
          border-radius: 5px 0 0 5px;
          width: 78%;
          top: 0;
          left: 0;
          height: 7px;
          background-color: #35CA97;
        }
        .marketplace-shipping {
          color: #ECA200;
          font-size: 10px;
          text-transform: uppercase;
          letter-spacing: 1px;
          margin-bottom: 20px;
          display: box;
          display: -webkit-flex;
          display: -moz-flex;
          display: -ms-flexbox;
          display: -ms-flex;
          display: flex;
          font-family: "Benton Sans Medium", "Helvetica", "sans-serif";
          svg {
            fill: #ECA200;
            height: 16px;
            width: 16px;
            margin-right: 12px;
            padding-bottom: 4px;
          }
        }
        .panel-description {
          font-size: 14px;
          margin-bottom: 20px;
          width: 100%;
        }
        .cta-link {
          display: -webkit-flex;
          display: -moz-flex;
          display: -ms-flexbox;
          display: -ms-flex;
          display: flex;
          font-family: "Benton Sans", "Helvetica", "sans-serif";
          font-weight: bold;
          font-size: 12px;
          color: #2a2a2a;
          text-transform: uppercase;
        }
      }

    }
    .props {
      background-color: white;
      text-align: center;
      .container {
        width: 90%;
        margin: 0 auto;
        margin: 60px 0;
        padding: 16px;
        span {
          display: block;
          text-align: center;
        }
        .icon {
          width: 67px;
          height: 67px;
        }
        .title {
          font-family: "Benton Sans Medium", "Helvetica", "sans-serif";
          font-size: 16px;
          line-height: 23px;
        }
        .content {
          font-size: 14px;
          line-height: 20px;
        }
      }

    }
    .intro {
      text-align: center;
      line-height: 40px;
      background: white;
      .container {
        h2 {
          font-size: 30px;
          text-aligin: center;
        }
        .subtitle {
          margin-top: 12px;
          margin-bottom: 20px;
        }
        .i-cta-1 {
          font-family: "Benton Sans", "Helvetica", "sans-serif";
          font-weight: bold;
          line-height: 14px;
          text-transform: uppercase;
          letter-spacing: 1px;
          display: inline-block;
          cursor: pointer;
          padding: 11px 18px;
          border-radius: 2px;
          text-align: center;
          min-height: 40px;
          border: 1px solid #2a2a2a;
          color: #2a2a2a;
          font-weight: bold;
          margin-bottom: 20px;
        }
        .i-cta-1--ghostBatman:hover {
          background-color: #2a2a2a;
          border-color: #2a2a2a;
          color: #ffffff;
        }
        .categories-body {
          margin-bottom: 20px;
        }
      }
    }
    .area {
      background: white;
      .container {
        text-align: center;
        img {
          width: 80px;
          height: 80px;
        }
        span {
          display: block;
          font-family: "Benton Sans Medium", "Helvetica", "sans-serif";
          font-size: 12px;
          text-transform: uppercase;
          color: #2a2a2a;
          height: 35px;
          text-transform: uppercase;
        }
      }
    }
  }

</style>
